import { IFeidaoAiMobile } from '@dfeidao/mobile/interfaces';
import React from 'react';
import { ActivityIndicator, FlatList, RefreshControl, Text, TouchableOpacity, View } from 'react-native';
import { Icon, Image } from 'react-native-elements';

// interface P {
// 	title: string;
// 	data: D[];
// }

interface D {
	key: {
		student_no: string;
		student_name: string;
		headimg: string;
		productid: string;
		phone: string;
		uri: { uri: string; };
	};
}

export default function tpl(a: (action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: (d: string) => string | number | unknown, fd: IFeidaoAiMobile) {
	const arr = d('d') as D[];
	if (arr) {
		const new_len = Number(d('new_len'));
		const page_no = Number(d('page_no'));
		const len = arr.length;
		const page_size = 20;
		console.log('----------1--------->', page_no, len, new_len);
		if (arr[0]) {
			return (
				<View>
					<View>
						<FlatList refreshControl={
							<RefreshControl
								onRefresh={a('a001')}
								colors={['#ff0000']}
								enabled={true}
								progressBackgroundColor="#ffffff"
								refreshing={false}
							/>
						} onEndReached={a('a005', page_no + 1)}
							onEndReachedThreshold={0.1} data={arr} renderItem={({ item, index }) => {
								return (
									<View style={s('xueFF')}>
										<View style={{ flexDirection: 'row', alignItems: 'center' }}>
											<Image source={item.key.uri ? item.key.uri : require('../../imgs/nan.jpg')} style={{ width: 50, height: 50, borderRadius: 25, marginRight: 20 }} />
											<Text style={s('text1')}>{item.key.student_name}</Text>
										</View>
										<View style={{ height: 50, flexDirection: 'row', alignItems: 'center' }}>
											<TouchableOpacity onPress={a('a003', item.key.student_no)}>
												<Image
													source={require('../../imgs/zhaopian.png')} style={s('tu1')}
												/>
											</TouchableOpacity>
											<Text style={{ width: 10 }}></Text>
											<TouchableOpacity onPress={a('a002', item.key.student_no)}>
												<Image
													source={require('../../imgs/xiangqing.png')} style={s('tu1')}
												/>
											</TouchableOpacity>
											<Text style={{ width: 10 }}></Text>
											<TouchableOpacity onPress={a('a004', item.key.phone)}>
												<Icon name="call" color="#00CC66" size={20}></Icon>
											</TouchableOpacity>
										</View>
										{(() => {
											if (len === index + 1 && len > page_size - 1) {
												if (new_len) {
													return (
														<View style={s('footer')}>
															<ActivityIndicator />
															<Text>正在加载更多数据...</Text>
														</View>
													);
												} else {
													return (
														<View style={{ height: 30, backgroundColor: '#f4f4f4', position: 'absolute', bottom: 0, left: 0, right: 0 }}>
															<Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5, textAlign: 'center' }}>
																没有更多数据了
												</Text>
														</View>
													);
												}
											}
										})()}
									</View>);
							}}
						/>
					</View>
				</View>);
		} else {
			return (<View style={s('page')}>
				<Image source={require('../../imgs/wushuju.png')} style={{ width: 80, height: 80 }} />
				<Text style={{ fontSize: 20 }}>没有符合当前筛选条件的数据</Text>
			</View>);
		}
	} else {
		return (
			<View style={s('footer1')}>
				<ActivityIndicator
					animating={true}
					color='blue'
					size="large"
				/>
			</View>
		);
	}


	// 现有图标库：https://oblador.github.io/react-native-vector-icons/

	// <SectionList sections={p} renderItem={({ item, index, section }: { item: D, index: number; section: object }) =>
	// 			<View style={s('xueFF')}>
	// 				<Image source={require(img_url + item.headimg)} style={{ width: 50, height: 50, borderRadius: 25, marginRight: 20 }} PlaceholderContent={<ActivityIndicator />}
	// 				/>
	// 				<Text onPress={a('a002')} style={s('text1')}>{item.student_name}</Text>
	// 				<View style={{ position: 'absolute', right: 20, height: 50, top: 25, flexDirection: 'row' }}>
	// 					<Icon name="call" color="#666666" size={26}></Icon>
	// 					<Text style={{ width: 10 }}></Text>
	// 					<Icon name="call" color="#666666" size={26}></Icon>
	// 				</View>
	// 			</View>
	// 		}
	// 		/>) ;
}
